<template>
	<view class="content display width_750  displayColumn">
		<u-navbar @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<template slot="left">
				<uni-icons type="left" color="#212121;" size="23" @click="back"></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title">转增洗车券</text>
			</template>
		</u-navbar>
		<template v-if="shareflag">
			<image @click="getCoupon"
				src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/2025/02/17/d871e8a964c54a0fae1b894ecdd976ba.png" mode="widthFix"
				class="wdh-100"></image>
		</template>
		<template v-else>
		<view class="fn_content display width_750  all_item displayColumn">
			<view class="fn_one display width_699  displayColumn M-T30" style="padding-bottom: 24rpx;">
				<view class="one_1 display  fontSize font_comm M-T24">
					<span class="fon_txt1 M-L24">选择转赠方式</span>
				</view>
				<view class="two display width_699  M-T20">
					<view class="two_item display all_item  fontSize font_comm" :style="{background: selectIndex==index ? '#126BC9' :'rgba(18,107,201,0.1)','margin-left':index==0 ?'24rpx' :'60rpx'}" v-for="(item,index) in 3" :key="index" @click="change(index)">
						<span class="fn_txt2" :style="{color:selectIndex==index ? '#FFF' :'#212121'}">{{index==1?'手机号' : index==2 ? '车牌号' : '分享'}}</span>
					</view>
				</view>
				<!-- <view class="three display  width_699 fontSize font_comm displaycenter_aliem M-T30">
					<span class="fn_txt3 M-L24">对方姓名</span>
					<input type="text" class="input1 M-L16" placeholder="请输入" placeholder-class="input2" />
				</view> -->
				<view class="three display  width_699 fontSize font_comm displaycenter_aliem M-T30">
					<span class="fn_txt3 M-L24" v-if="selectIndex == 1">联系方式</span>
					<!-- <span class="fn_txt3 M-L24" v-if="selectIndex == 2">车牌号</span> -->
					<input type="text" class="input1 M-L16" v-if="selectIndex == 1" v-model="FormDate.phone" placeholder="请输入手机号" placeholder-class="input2" />
					<!-- <input type="text" class="input1 M-L16" v-if="selectIndex == 2" v-model="FormDate.license" placeholder="请输入车牌号" placeholder-class="input2" /> -->
					
					<view class="columnbox n-box"  v-if="selectIndex == 2">
						<view class="rowbox wdh-100 spb car-num-list" @click="showKeyboard('xmKeyboard')">
							<view class="rowbox" v-for="(item,index) in 8" :key='index'>
								<view v-if="index==7" class="rowbox new-box">
									{{carnum.length<8?'新':carnum[7]}}
								</view>
								<view class="rowbox one-car-num car-num-input" v-else-if="index<carnum.length">
									{{carnum[index]}}
								</view>
								<view class="rowbox one-car-num" v-else>
								</view>
								<view v-if="index==1" class="car-num-dot"></view>
							</view>
						</view>
						<view class="rowbox wdh-100 scan-box">
							<u-icon style="margin-right: 10rpx;" name="scan" color="#126BC9" size="40rpx"></u-icon>
							<view>扫一扫识别车牌号</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 要转增的洗车券 -->
			<view class="fn_two display width_750  displayColumn M-T36">
				<view class="two_one display  width-100 fontSize font_comm">
					<span class="fn_two_txt1 M-L30">要转赠的洗车劵</span>
				</view>
				<view class="two_two display  width_750 all_item M-T20">
					<view class="columnbox cou-one-box-content" >
						<view class="columnbox cou-one-box" :style="{'background-image': 'url(' +item.bgUrl+')'}">
							<view class="rowbox wdh-100 als spb">
								<view class="rowbox">
									<image src="/static/img/logo.jpeg" mode="aspectFill" class="cou-img"></image>
									<view class="columnbox als cou-name-box">
										<view class="cou-name">{{item.name}}</view>
										<!-- <view class="origin">{{item.origin}}</view> -->
										<view class="origin">好友 {{phone}} 赠送</view>
									</view>
								</view>
								<!-- <view class="coupon_price"><text>￥</text>{{item.price}}</view> -->
								<view class="coupon_price"><text>￥</text>30</view>
							</view>
							<view class="wdh-100 code">洗车券码：{{item.code}}</view>
							<view class="wdh-100 validity" v-if="item">有效期至：{{item.validity.split(' ')[0]}}</view>
						</view>
						<view class="wdh-100 rowbox spb coupon-desc" @click="item.flag=!item.flag">
							<view style="width: 550rpx;" :class="{'textovflow':!item.flag}">使用说明：{{item.illustrate}}
							</view>
							<u-icon v-if="!item.flag" name="arrow-down" size="28rpx"></u-icon>
							<u-icon v-else name="arrow-up" size="28rpx"></u-icon>
						</view>
					</view>
					<u-popup :show="shareBox" mode="center" :round="25" @close="shareBox = false" :safeAreaInsetBottom="false">
						<view class="fn_popup display displayColumn all_item" style="border-radius: 25rpx;">
							<span class="fn_txts1">转赠洗车券</span>
							<span class="fn_txtxs2" style="margin-top: 30rpx;text-align: center;">1张洗车券</span>
							<span class="fn_txtxs2" style="margin-top: 30rpx;text-align: center;">24小时内好友未领取，将自动返还</span>
							<view class="display width-100">
							<button class="fn_btns1 display all_item" style="margin-top: 36rpx;" @click="shareBox=false">取消</button>
							<button open-type="share" class="fn_btns display all_item" style="margin-top: 36rpx;">发送</button>
							</view>
						</view>
					</u-popup>
				</view>
			</view>
			
		</view>
		<xm-cell style="opacity: 0;" special label="" :value="value" @show=""></xm-cell>
		<xm-keyboard-v2 ref="xmKeyboard" @change='changeValue' @confirm="(v) => value = v"></xm-keyboard-v2>
		<view class="wdh-100" style="height: 200rpx;"></view>
		<!-- 按钮 -->
		<view class="fn_btn display width_750  all_item" style="margin-top: 400rpx;">
			<button class="fn_buttons display  fontSize font_comm all_item" @click="confirm">确认转赠</button>
		</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				shareBox: false, //分享弹窗
				shareflag: false, //展示分享落地页
				couponsId: '',
				selectIndex:0,// 0分享 1手机号 2车牌号
				item:{},
				phone:'',
				carnum: [],
				FormDate:{
					phone: '',
					license: ''
				}
			}
		},
		computed: {
			// 通过计算属性将 state 中的 count 映射到组件
			isLogin() {
				return this.$store.state.isLogin;
			}
		},
		onLoad(options){
			if (options.couponsId) {
				this.shareflag = true
				this.couponsId = options.couponsId
			} else {
				this.item = JSON.parse(options.info);
			}
			this.phone = 	uni.getStorageSync('userInfo').user.phonenumber
		},
		onShareAppMessage() {
			this.$req.get('/xcx/userCoupons/give', {
				couponsId: this.item.id
			}).then(res => {
				uni.hideLoading()
				if (res.data.code == 200) {
					this.$modal.msg("操作成功");
				} else {
					uni.showModal({
						title: '转赠失败',
						content: res.data.msg,
						success: () => {}
					})
				}
			})
			return {
				title: '您的好友赠送了一张优惠券给你',
				imageUrl: 'http://mkxd-app.oss-cn-beijing.aliyuncs.com/bb32e8fd15514faf9c90e67e69c363f7.jpg',
				path: '/packageC/Transfer/Transfer?couponsId=' + this.item.id,
			}
		},
		methods: {
			getCoupon() {
				if (this.isLogin) {
					this.$req.put(`/xcx/userCoupons/receive/${this.couponsId}`).then(res => {
						if (res.data.code == 200) {
							uni.showModal({
								title: '领取成功',
								success: () => {
									uni.reLaunch({
										url: '/pages/index/index'
									})
								}
							})
						} else {
							uni.showModal({
								title: '领取失败',
								content: res.data.msg,
								success: () => {}
							})
						}
					})
				}else {
					this.$noLog()
				}
			},
			// 	selectIndex:0,//0分享 1手机号 2车牌号 
			confirm(){
				if (this.carnum.length < 7 && this.selectIndex == 2) {
					uni.showToast({
						title: '请输入车牌号',
						icon: 'none'
					})
					return false
				}
				this.$modal.loading('正在加载');
				let data = {
					couponsId: this.item.id,				//洗车券id
					phoneNumber: this.FormDate.phone,	//用户手机号
					license: this.carnum.join(''),		//用户车牌
				}
				if(this.selectIndex == 1){
					this.$req.get('/xcx/userCoupons/give/phone',data).then(res=>{
						this.$modal.closeLoading();
						if(res.data.code == 200){
							this.$modal.msg(res.data.msg);
							setTimeout(()=>{
								this.$tab.redirectTo('/pages/coupon/myCoupon');
							}, 1000)
						}else{
							this.$modal.msg(res.data.msg)
						}
					})
				}
				if(this.selectIndex == 2){
					this.$req.get('/xcx/userCoupons/give/license',data).then(res=>{
						this.$modal.closeLoading();
						// console.log(res)
						if(res.data.code==200){
							this.$modal.msg(res.data.msg)
							setTimeout(()=>{
								this.$tab.redirectTo('/pages/coupon/myCoupon');
							}, 1000)
						}else{
							this.$modal.msg(res.data.msg)
						}
					})
				}
				if(this.selectIndex == 0){
					this.shareBox = true;
					this.$modal.closeLoading();
				}
			},
			changeValue(e) {
				this.carnum = e.split('')
			},
			showKeyboard(ref) {
				this.$refs[ref].toShow(this.value)
			},
			change(e) {
				this.selectIndex = e;
			},
		}
	}
</script>

<style scoped lang="scss">
	.n-box {
		width: 710rpx;
		background: #fff;
		padding: 28rpx 24rpx;
		border-radius: 24rpx;


	}
	.car-num-list {
		.one-car-num {
			width: 52rpx;
			height: 52rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			border: 2rpx solid rgba(0, 0, 0, 0.6);
			font-size: 24rpx;
		}

		.car-num-dot {
			background: #C3C3C3;
			width: 20rpx;
			height: 20rpx;
			border-radius: 100rpx;
			margin-left: 20rpx;
		}

		.new-box {
			width: 52rpx;
			height: 52rpx;
			border-radius: 10rpx;
			color: #00E065;
			border: #00E065 solid 1px;
			background-color: rgba(#00E065, 0.1);
			font-size: 24rpx;
		}

		.car-num-input {
			color: #000;
			border: #1E72CA solid 1px;
			background-color: rgba(56, 148, 254, 0.1);
		}
	}
	.scan-box {
		background: rgba(#17698F, 0.1);
		padding: 20rpx 20rpx;
		margin-top: 32rpx;
		border-radius: 24rpx;
		border: #17698F solid 1px;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 24rpx;
		color: #126BC9;
	}

	.title {
		font-weight: 600;
		font-size: 34rpx;
		color: #232323;
	}
	.fn_one{
		// height: 344rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
	.fon_txt1{
		font-weight: 600;
		font-size: 28rpx;
		color: #000000
	}
	.fn_txt2{
		font-weight: 400;
		font-size: 24rpx;
		color: #212121;
	}
	.input1{
		width: 514rpx;
		height: 64rpx;
		background: #F6F6F6;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #000;
		padding-left: 16rpx;
		text-align: left;
	}
	.input2{
		font-weight: 400;
		font-size: 24rpx;
		color: #72778A;
	}
	.two_item{
		width: 112rpx;
		height: 54rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		// justify-content: flex-start;
	}
	.two{
		justify-content: flex-start;
	}
	.fn_txt3{
		font-weight: 400;
		font-size: 28rpx;
		color: #212121;
	}
	.fn_two_txt1{
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
	}
	.cou-one-box-content {
		background: #fff;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
	}
	.cou-one-box {
		border-radius: 20rpx;
		padding: 20rpx 20rpx;
		// background: linear-gradient(to right, #ffae4f, #ff9022);
		background-repeat: no-repeat;
		background-size: 100% auto;
		width: 710rpx;
		color: #fff;
		font-size: 28rpx;
		position: relative;
	
		.cou-img {
			width: 90rpx;
			height: 90rpx;
			border-radius: 100rpx;
		}
	
		.cou-name-box {
			width: 400rpx;
			margin-left: 20rpx;
		}
	
		.cou-name {
			font-size: 32rpx;
			font-weight: bold;
		}
	
		.origin,
		.code,
		.validity {
			font-size: 24rpx;
			opacity: 0.9;
			margin-top: 10rpx;
		}
	
		.code {
			margin-top: 70rpx;
		}
	
		.use-btn {
			background: #126BC9;
			color: #fff;
			border: #126BC9 solid 1px;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 24rrpx;
			padding: 4rpx 20rpx;
			border-radius: 10rpx;
		}
	
		.zs-btn {
			background: #fff;
			margin-right: 20rpx;
			color: #1E72CA;
		}
	}
	.coupon-desc {
		font-size: 24rpx;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
		color: #6c6d6d;
	}
	.two_one{
		justify-content: flex-start;
	}
	.coupon_price {
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 40rpx;
		color: #FFFFFF;
	
		text {
			font-size: 24rpx;
		}
	}
	.fn_buttons{
		width: 690rpx;
		height: 84rpx;
		background: #126BC9;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
	}
	.fn_popup{
		width: 630rpx;
		height: 366rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}
	.fn_btns{
		height: 72rpx;
		background: #126BC9;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
	}
	.fn_btns1{
		height: 72rpx;
		background: rgba(18,107,201,0.1);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #126BC9;
	}
</style>
